<script>
import { ref } from 'vue';

/* 
vue3中定义响应式数据，有两种
1. 复杂对象数据 - reactive 
  作用： 把传进来的 复杂类型数据 转化成响应式
2. 所有数据 - ref
  作用：对传入的数据, 转换成响应式对象返回，里面有唯一属性value

    1. ref 函数接收一个的值, 返回一个 ref 响应式对象, 有唯一的属性 value
    2. 在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值
    3. 在模板中, ref 属性会自动解套, 不需要额外的 .value
    4. ref 函数也支持传入复杂类型，传入复杂类型，也会做响应式处理
*/

export default {
  setup() {
    let money = ref(10000);
    const change = () => {
      money.value += 1000;
      console.log('money -----> ', money);
    };

    return { money, change };
  },
};
</script>

<template>
  <h1 @click="change">工资：{{ money }}</h1>
</template>
